<template>
	<view>
		<dsl-navbar title="好友申请" bgTopImg="white" isBack></dsl-navbar>
		<view v-if="friendInfoList && friendInfoList.length !=0">
			<view class="flex justify-between align-center solid-bottom padding" v-for="(item,index) in friendInfoList"
				:key='index'>
				<view class="flex align-center">
					<image :src="item.friendAvatar" mode="aspectFill" class="square_image"></image>
					<view class="margin-left">
						<view class="square_name one_overflow">{{item.friendName}}</view>
						<view class="square_classify one_overflow margin-top-sm">
							{{item.agreeTime}}
						</view>
					</view>
				</view>
				<view class="align-center">
					<view class="submit" @click="submit(item,0)" v-if="item.state ==0">
						通过
					</view>
					<view class="submit margin-left" @click="submit(item,1)" v-if="item.state == 0">拒绝</view>
				</view>
				<view class="text-grey" v-if="item.state == 2" @click="submit(item,1)">已拒绝</view>
				<view class="text-green" v-if="item.state == 1">已通过</view>
			</view>
		</view>
		<view v-else class="text-center padding text-gray">
			暂无
		</view>
	
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				pageNum: 1,
			}
		},
		//生命周期函数
		computed: {
			/**
			 * friendInfoList 申请列表
			 */
			...mapState('chat', ['friendInfoList'])
		},
		onReady() {},
		onLoad() {},
		onShow() {
			this.pageNum = 1
			this.friendMen()
		},
		methods: {
			/**
			 * friendList 好友申请列表
			 * approvingFriendRequestsApi 通过
			 */
			...mapActions('chat', ['friendList', 'approvingFriendRequestsApi']),

			//好友申请
			friendMen() {
				this.friendList({
					pageSize: 20,
					pageNum: this.pageNum,
					state: 0, //状态 0-待审核 1-已通过 2-已拒绝
				})
			},
			//通过
			submit(item, i) {
				if (i == 0) {
					this.approvingFriendRequestsApi({
						state: 1,
						id: item.id,
						data: item
					})
				} else {
					this.approvingFriendRequestsApi({
						state: 2,
						id: item.id,
						data: item
					})
				}
			},
			onReachBottom(e) {
				this.pageNum++
				this.friendMen()
			},
		},
		components: {},
	}
</script>

<style>
	/* 广场 */
	.text-grey {
		color: #B7BED8;
	}

	.square_image {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
	}

	.square_icon {
		width: 40rpx;
		height: 40rpx;
	}

	.square_name {
		width: 308rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}

	.square_classify {
		width: 308rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #B7BED8;
		opacity: 1;
	}

	.submit {
		width: 110rpx;
		height: 60rpx;
		background: linear-gradient(180deg, #EAA019 0%, #BA4949 100%);
		opacity: 1;
		border-radius: 10rpx;
		line-height: 60rpx;
		color: white;
		text-align: center;
	}

	view {}
</style>
